<template>
	<view class="fui-wrap">
		<fui-result v-if="err" type="fail" title="操作失败" :descr="err">
			<fui-button @click="$reLaunch('parking/index')" width="400rpx" height="84rpx" text="返回主页" type="success" bold :margin="['48rpx','0','24rpx']"></fui-button>
		</fui-result>
		<block v-else>
			<view style="width: 100%;height: 520rpx;" id="video-container"></view>
			<view v-if="screen && !screen.url" class="nodata">
				获取连接失败!
			</view>
			<view class="log-container">
				<view class="title">岗亭即时消息</view>
				<view :class="['logbox',log.length>0?'':'flexcenter']" :style="`height: ${screenheight-952-safebottom}rpx;`">
					<block v-if="log.length">
						<view class="log-item" v-for="i in log.length" :style="`color:${log[log.length-i].color}`" v-html="log[log.length-i].message"></view>
					</block>
					<fui-text v-else text="😢暂无消息！" color="#ddd" size="28" block></fui-text>
				</view>
			</view>
			<view class="bottom" :style="`bottom: ${safebottom}rpx;`">
				<view class="btngroup" v-if="screen.status=='hidden'">
				</view>
				<view class="btngroup">
					<fui-button :disabled="disabledButton" @click="open" type="danger" width="220rpx" height="74rpx">开闸</fui-button>
					<fui-button :disabled="disabledButton" @click="close" type="success" width="220rpx" height="74rpx">关闸</fui-button>
					<fui-button :disabled="disabledButton" @click="photo" width="220rpx" height="74rpx">拍照</fui-button>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {methods,baseUrl} from '@/utils/core.js';
	import toolbar from './components/toolbar.vue';
	let flvPlayer;
	export default {
		components:{
			toolbar:toolbar
		},
		data() {
			return {
				err:'',
				screen: '',
				mqttConfig:'',
				clientId:'',
				tagShow: false,
				log:[],
				screenheight:0,
				safebottom:0,
				disabledButton:false,
				jessibuca:'',
				token:''
			}
		},
		onLoad(e) {
			let that=this;
			uni.getSystemInfo({
			  success: function (info) {
				that.screenheight=info.screenHeight*2;  
				that.safebottom=info.safeAreaInsets.bottom*2;
			  }
			});
			this.token=e.token;
			this.getBarriers(e.barrier_id);
		},
		methods: {
			...methods,
			getBarriers:function(barrier_id){
				this.$get('parking/screen/barrier?token='+this.token,{barrier_id:barrier_id}).then(res=>{
					this.mqttConfig=res.mqtt;
					this.clientId=res.clientId;
					this.screen=res.barrier;
					this.play();
					this.connectMqtt();
				}).catch(e=>{
					this.err=e.msg;
				});
			},
			connectMqtt:function (){
				let options={
					clean: true,
					connectTimeout: 4000,
					reconnectPeriod: 1000,
					clientId:this.clientId,
					username:this.mqttConfig.mqtt_username,
					password:this.mqttConfig.mqtt_password
				};
				let client = mqtt.connect('wss://'+this.mqttConfig.mqtt_host+':'+this.mqttConfig.mqtt_web_port+'/mqtt', options);
				let topic=[];
				topic.push(this.screen.serialno+'/barrier/screen/record/message/'+this.screen.parking_id);
				client.on('connect', () => {
					client.subscribe(topic,() => {
						console.log(`mqtt连接成功`);
					});
				});
				client.on('message', (topic, res) => {
					res=JSON.parse(res.toString());
					let body=res.payload.body;
					if(body.type=="pay"){
						let {message,color}=body;
						this.log.push({color:color,message:message});
					}
					if(body.type=="message"){
						this.log.push(body);
					}
				});
			},
			play:function(){
				if(!this.screen.url){
					return;
				}
				let showOperateBtns=true;
				let forceNoOffscreen=true;
				let $container=document.getElementById('video-container');
				this.jessibuca = new window.Jessibuca({
					container: $container,
					videoBuffer: 0.2, // 缓存时长
					isResize: false,
					decoder:baseUrl+'h5/static/jessibuca/decoder.js',
					text: "",
					loadingText: "加载中",
					debug: false,
					showBandwidth: showOperateBtns, // 显示网速
					operateBtns: {
						fullscreen: showOperateBtns,
						screenshot: showOperateBtns,
						play: showOperateBtns,
						audio: showOperateBtns,
					},
					forceNoOffscreen: forceNoOffscreen,
					useWebFullScreen: false,
					isNotMute: false,
				});
				setTimeout(()=>{
					this.jessibuca.play(this.screen.url);
				},1500);
			},
			open:function (){
				let barrier=this.screen;
				this.disabledButton=true;
				uni.showModal({
					content:'您确定要打开'+barrier.title+'吗？',
					success: (e) => {
						if(e.confirm){
							this.$post('parking/screen/open?token='+this.token,{barrier_id:barrier.id},true,true).then(res=>{
								this.disabledButton=false;
							}).catch(e=>{
								this.disabledButton=false;
							});
						}else{
							this.disabledButton=false;
						}
					}
				});
			},
			close:function (){
				let barrier=this.screen;
				uni.showModal({
					content:'您确定要关闭'+barrier.title+'吗？',
					success: (e) => {
						if(e.confirm){
							this.$post('parking/screen/close?token='+this.token,{barrier_id:barrier.id},true,true).then(res=>{
								this.disabledButton=false;
							}).catch(e=>{
								this.disabledButton=false;
							});
						}else{
							this.disabledButton=false;
						}
					}
				});
			},
			photo:function (){
				let barrier=this.screen;
				this.$post('parking/screen/photo?token='+this.token,{barrier_id:barrier.id},true,true).then(res=>{
					this.disabledButton=false;
				}).catch(e=>{
					this.disabledButton=false;
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.nodata{
	width: 100%;
	height: 520rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	color: red;
	background: #ddd;
	position: absolute;
	top: 0rpx;
}
.log-container{
	.title{
		padding: 30rpx;
		font-size: 32rpx;
		color: #181818;
	}
	.logbox{
		overflow-y: scroll;
		padding: 20rpx;
		background-color: #fff;
	}
	.log-item{
		font-size: 24rpx;
	}
}
.flexcenter{
	display: flex;
	justify-content: center;
	align-items: center;
}
.bottom{
	position: fixed;
	bottom: 0;
	width: 100%;
	.btngroup{
		display: flex;
		justify-content: space-between;
		width: 96%;
		margin: 20rpx auto;
	}
}
.fui-section__title {
	margin-left: 32rpx;
}

.fui-filter__bar {
	width: 100%;
	height: 88rpx;
	display: flex;
	align-items: center;
	background-color: #fff;
	margin-bottom: 40rpx;
}

.fui-filter__item {
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30rpx;
	/* #ifdef H5 */
	cursor: pointer;
	/* #endif */
}

.fui-filter__icon {
	transition: all .15s linear;
}

.fui-icon__ani {
	transform: rotate(180deg);
}

.fui-list__cell {
	width: 100%;
}

.fui-select {
	flex: 1;
	height: 80rpx;
	padding: 32rpx;
	box-sizing: border-box;
	position: relative;
}

.fui-select::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 200%;
	height: 200%;
	border: 1px solid #eee;
	transform: scale(.5);
	transform-origin: 0 0;
	pointer-events: none;
}

.fui-input {
	font-size: 32rpx;
	flex: 1;
	padding-right: 8rpx;
	color: #181818;
	pointer-events: none;
}
</style>